<template>
  <div class='content-box' style='color: #828280;padding: 100px 0;display: flex;justify-content: center;flex-direction: column;align-items: center;'>
    <div class='box'>
      <img class='success' src='../../../assets/success.png' alt=''>
      <div class='info'>
        <p>恭喜您，支付成功</p>
        <p>支付金额：<span>30720.15 元</span></p>
        <p>支付时间：2020-12-31  18:22:08</p>
      </div>
    </div>
    <div style='margin: 60px 0;width: 100%;text-align: center;'>
      <el-button @click='backIndex' type='primary' style='width: 12%'>返回首页</el-button>
      <el-button @click='dialogVisible=true' type='primary' style='width: 12%'>开具发票</el-button>
    </div>

    <!--开具发票-->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="40%">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="费用类型">
          <el-input v-model="form.type"></el-input>
        </el-form-item>
        <el-form-item label="应缴金额">
          <el-input v-model="form.money"></el-input>
        </el-form-item>
        <el-form-item label="支付方式">
          <el-input v-model="form.payType"></el-input>
        </el-form-item>
        <el-form-item label="发票类型">
          <el-checkbox-group v-model="form.item">
            <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
            <el-checkbox label="地推活动" name="type"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="发票抬头">
          <el-radio-group v-model="form.resource">
            <el-radio label="单位"></el-radio>
            <el-radio label="个人"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="">
          <el-input v-model="form.company" :disabled='true'></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-input v-model="form.payId" :disabled='true'></el-input>
        </el-form-item>
        <el-form-item style='display: flex;justify-content: center;'>
          <el-button type="primary" @click="onSubmit">提交</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'success',
  data(){
    return{
      dialogVisible:false,
      form:{
        type:'',
        money:'',
        payType:'',
        name:'',
        resource:'',
        item:'',
        company:'重庆致美科技有限公司',
        payId:'纳税人识别号或统一社会信用代码'
      }
    }
  },
  methods:{
    backIndex(){
      this.$router.push({path:'/userHome'})
    },
    onSubmit(){
      let data={

      }
      this.$http.get('/pc/remote/payment/query',data).then(res=>{
        console.log(res)
      })
    }
  }
}
</script>

<style lang='less' scoped>
.box{
  display: flex;
  .success{
    width: 60px;
    height: 60px;
    margin-right: 20px;
  }
  .info{
    p{
      font-size: 20px;
      text-align: left;
      line-height: 50px;
      span{
        color:#dd253c;
      }
    }
  }
}
</style>